<template>
  <div class="Rank">
    <img class="back" src="@/assets/back.png" @click="goBack" />
    <img :src="ItemList.coverImgUrl" alt="" />
    <span>{{ ItemList.description }}</span>
    <div class="item">
      <ul>
        <li v-for="(song, index) in ItemList.tracks" :key="song.index" @click="selectPlayList(song)">
          <span class="item-num">{{ index + 1 }}.
            <span class="item-first">{{ song.name }}
              </span>
              </span>
          <span class="item-songer">-{{ song.ar[0].name }}</span>
        </li>
      </ul>
    </div>

  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      ItemList: [],
      songid:"",
    };
  },
  created() {
    this.getItemList();
  },
  methods: {
    getItemList() {
      this.songid = this.$route.params.songid,
      axios
        .get("api/playlist/detail?id=" + this.songid)
        .then((res) => {
          // console.log(res.data);
          this.ItemList = res.data.playlist;
          console.log(this.ItemList);
          console.log(this.songid)
          // console.log(res.data);
          // this.Detail = res.data;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    goBack() {
      this.$router.go(-1);
    },
    selectPlayList(song){
      const id = song.id;
      this.$router.push({ name: "Play",
      params:{id:id}
      });
    }
  },
};
</script>
<style scoped>
.Rank > img {
  width: 412px;
  height: 350px;
}
.Rank > .back{
  width: 20px;
  height: 20px;
  display: flex;
  position: absolute;
  top: 10px;
  left: 10px;
}

.item {
  display: flex;
}
.item > h3 {
  /* text-align: left;
  padding-left: 50px; */
  text-align: center;
}
.item > img {
  width: 35%;
  height: 35%;
  margin-left: 15px;
  border-radius: 20px;
}
.item > ul > .item-update {
  font-size: 15px;
  text-align: right;
  padding-left: 150px;
}
.item > ul > li {
  text-align: left;
  padding-left: 10px;
  display: block;
}
.item > ul > li > .item-num {
  font-size: 25px;
display: block;
}

.item > ul > li > .item-first {
  font-size: 20px;
  padding-left:10px ;

}
.item > ul > li > .item-songer {
  font-size: 15px;
  display: block;
  margin-left: 30px;
}
</style>